<template>
	<view class="flex">
		<u-modal show-cancel-button v-model="showModal" :title='modalTitle' @confirm="modalConfirm">
			<view class="margin-lg">
				<view v-if="currentOperateObj.clazz=='cpu'">
					<form>
						<view class="cu-form-group"> 产品类别：中央处理器</view>

						<view class="cu-form-group">核心数：<input :disabled="editDisable"
								v-model="currentOperateObj.item.numberOfCores" />个</view>
						<view class="cu-form-group">主频：<input :disabled="editDisable"
								v-model="currentOperateObj.item.clockSpeed" /> Ghz
						</view>
						<view class="cu-form-group">价格：<input :disabled="editDisable"
								v-model="currentOperateObj.item.price" /> 元/月
						</view>
					</form>
				</view>
				<view v-if="currentOperateObj.clazz=='gpu'">

					<form>
						<view class="cu-form-group"> 产品类别：图形处理器</view>
						<view class="cu-form-group"> 计算力：<input :disabled="editDisable"
								v-model="currentOperateObj.item.calcCapability" />TFLOPs</view>
						<view class="cu-form-group"> 显存：<input :disabled="editDisable"
								v-model="currentOperateObj.item.gpuMemory" />GB</view>
						<view class="cu-form-group">价格：<input :disabled="editDisable"
								v-model="currentOperateObj.item.price" /> 元/月
						</view>
					</form>
				</view>
				<view v-if=" currentOperateObj.clazz=='mem'">
					<form>
						<view class="cu-form-group"> 产品类别：内存</view>
						<view class="cu-form-group"> 容量：<input :disabled="editDisable"
								v-model="currentOperateObj.item.capacity" />GB</view>
						<view class="cu-form-group">价格：<input :disabled="editDisable"
								v-model="currentOperateObj.item.price" /> 元/月
						</view>
					</form>
				</view>
				<view v-if=" currentOperateObj.clazz=='db'">
					<form>
						<view class="cu-form-group">产品类别：数据库</view>
						<view class="cu-form-group">类型：<input :disable="editDisable"
								v-model="currentOperateObj.item.provider" /></view>
						<view class="cu-form-group">容量：<input :disable="editDisable"
								v-model="currentOperateObj.item.capacity" />GB</view>
					</form>
					<view class="cu-form-group">价格：<input :disabled="editDisable"
							v-model="currentOperateObj.item.price" />
						元/月
					</view>
				</view>
				<view v-if=" currentOperateObj.clazz=='os'">
					<form>
						<view class="cu-form-group"> 产品类别：操作系统</view>
						<view class="cu-form-group"> 名称： <input :disable="editDisable"
								v-model="currentOperateObj.item.name       " /></view>
						<view class="cu-form-group"> 登录方式：<input :disable="editDisable"
								v-model="currentOperateObj.item.loginMethod" /></view>
						<view class="cu-form-group"> 位数： <input :disable="editDisable"
								v-model="currentOperateObj.item.osBit      " /></view>
					</form>
					<view class="cu-form-group">价格：<input :disabled="editDisable"
							v-model="currentOperateObj.item.price" />
						元/月
					</view>
				</view>
				<view v-if=" currentOperateObj.clazz=='support'">
					<form>
						<view class="cu-form-group"> 产品类别：服务</view>
						<view class="cu-form-group"> 故障响应： <input :disable="editDisable"
								v-model="currentOperateObj.item.response" /> 小时</view>
						<view class="cu-form-group"> 工程师到场：<input :disable="editDisable"
								v-model="currentOperateObj.item.present " />小时</view>
					</form>
					<view class="cu-form-group">价格：<input :disabled="editDisable"
							v-model="currentOperateObj.item.price" />
						元/月
					</view>
				</view>
				<view v-if=" currentOperateObj.clazz=='nic'">
					<form>
						<view class="cu-form-group"> 产品类别：网卡</view>
						<view class="cu-form-group"> 带宽：<input :disable="editDisable"
								v-model="currentOperateObj.item.bandwidth" /> MB/s</view>
						<view class="cu-form-group">价格：<input :disabled="editDisable"
								v-model="currentOperateObj.item.price" />
							元/月
						</view>
					</form>
				</view>
				<view v-if=" currentOperateObj.clazz=='disk'">
					<form>
						<view class="cu-form-group"> 产品类别：磁盘</view>
						<view class="cu-form-group"> 容量： <input :disable="editDisable"
								v-model="currentOperateObj.item.capacity  " /> GB</view>
						<view class="cu-form-group"> 吞吐量：<input :disable="editDisable"
								v-model="currentOperateObj.item.throughput" /> MB/s</view>
					</form>
					<view class="cu-form-group">价格：<input :disabled="editDisable"
							v-model="currentOperateObj.item.price" />
						元/月
					</view>
				</view>

				<!-- <view> 价格：{{}} 元/月</view> -->
			</view>
		</u-modal>
		<view class="flex-sub">
			<view class="" v-for="(prod,index) in prods">
				<button @click="btnClick(index)" :style="state[index]==true?'background-color:#DEDEDE':''">
					<text v-if="prod=='cpu'" class="text-xl">中央处理器</text>
					<text v-if="prod=='gpu'" class="text-xl">图形处理器</text>
					<text v-if="prod=='mem'" class="text-xl">内存</text>
					<text v-if="prod=='disk'" class="text-xl">磁盘</text>
					<text v-if="prod=='os'" class="text-xl">操作系统</text>
					<text v-if="prod=='db'" class="text-xl">数据库</text>
					<text v-if="prod=='nic'" class="text-xl">网卡</text>
					<text v-if="prod=='support'" class="text-xl">服务与支持</text>
				</button>
			</view>
		</view>
		<view class="flex-twice" style="background-color: #DEDEDE;">
			<view
				:style="{backgroundImage: 'url('+'/static/backgrounds/cpu.jpg'+')'+';height:1280rpx;background-attachment:fixed'}">
				<view v-if="type==0">
					<scroll-view scroll-y style="height: 1000rpx;">

						<view class="padding-lg">
							<view><text class="title text-lg text-bold">编辑CPU</text></view>
							<view class="margin-top-lg"><button class="cu-btn" @click="insertProduct('cpu')">
									添加</button></view>
						</view>
						<view v-for="(item,index) in cpus.data" style="border-radius: 20rpx;"
							class=" bg-white flex align-center margin-bottom-sm">
							<!-- {{item.cpuId}} -->
							<view class="padding-sm">
								<view class="flex align-center">
									<view class=" text-xl">{{item.numberOfCores}}</view>
									<view class="margin-left-sm">核心</view>
								</view>

								<view class="flex align-center">
									<view class=" text-xl">{{item.clockSpeed}}</view>
									<view class="margin-left-sm">GHz</view>
								</view>

								<view class="flex align-center">
									<view class="text-price text-red text-xl">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('cpu',item.cpuId,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('cpu',item.cpuId,index)">
								<image src="/static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>

					</scroll-view>
				</view>
				<!-- GPU信息 -->
				<view v-if="type==1">
					<view class="padding-lg">
						<view><text class="title text-lg text-bold">编辑GPU</text></view>
						<view class="margin-top-lg"><button @click="insertProduct('gpu')" class="cu-btn"> 添加</button>
						</view>
					</view>
					<scroll-view scroll-y style="height: 1000rpx;">
						<view v-for="(item,index) in gpus.data" style="border-radius: 20rpx;"
							class=" bg-white  flex align-center margin-bottom-sm">
							<view class="padding-sm">
								<view class="flex align-center">
									<view class=" text-xl">{{item.calcCapability}}</view>
									<view class="margin-left-sm">TFLOPS</view>
								</view>

								<view class="flex align-center">
									<view class=" text-xl">{{item.gpuMemory}}</view>
									<view class="margin-left-sm">GB显存</view>
								</view>

								<view class="flex align-center">
									<view class="text-price text-red text-xl">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('gpu',item.gpuId,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('gpu',item.gpuId,index)">
								<image src="/static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>
					</scroll-view>
				</view>
				<!-- 内存信息 -->
				<view v-if="type==2">
					<view class="padding-lg">
						<view><text class="title text-lg text-bold">编辑内存</text></view>
						<view class="margin-top-lg"><button @click="insertProduct('mem')" class="cu-btn"> 添加</button>
						</view>
					</view>
					<scroll-view scroll-y style="height: 1000rpx;">
						<view v-for="(item,index) in mems.data" style="border-radius: 20rpx;"
							class=" bg-white  flex align-center margin-bottom-sm">
							<view class="padding-lg">
								<view class="flex align-center">
									<view class=" text-xl">{{item.capacity}}</view>
									<view class="margin-left-sm">GB</view>
								</view>

								<view class="flex align-center">
									<view class="text-price text-red text-xl">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('mem',item.memoryId,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('mem',item.memoryId,index)">
								<image src="/static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>
					</scroll-view>
				</view>
				<!-- 磁盘信息 -->
				<view v-if="type==3">
					<view class="padding-lg">
						<view><text class="title text-lg text-bold">编辑磁盘</text></view>
						<view class="margin-top-lg"><button @click="insertProduct('disk')" class="cu-btn"> 添加</button>
						</view>
					</view>
					<scroll-view scroll-y style="height: 1000rpx;">
						<view v-for="(item,index) in disks.data" style="border-radius: 20rpx;"
							class=" bg-white margin-bottom-sm  flex align-center">
							<view class="padding-sm">
								<view class="flex align-center">
									<view class=" text-xl">{{item.capacity}}</view>
									<view class="margin-left-sm">GB</view>
								</view>
								<view class="flex align-center">
									<view class="text-xl">{{item.throughput}}</view>
									<view class="margin-left-sm">MB/s</view>
								</view>
								<view class="flex align-center">
									<view class="text-price text-red text-xl">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('disk',item.diskId,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('disk',item.diskId,index)">
								<image src=" /static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>
					</scroll-view>
				</view>

				<!-- 操作系统信息 -->
				<view v-if="type==4">
					<view class="padding-lg">
						<view><text class="title text-lg text-bold">编辑操作系统</text></view>
						<view class="margin-top-lg"><button @click="insertProduct('os')" class="cu-btn">添加</button>
						</view>
					</view>
					<scroll-view scroll-y style="height: 1000rpx;">
						<view v-for="(item,index) in oss.data" style="border-radius: 20rpx;"
							class=" bg-white  margin-bottom-sm flex align-center">
							<view class="padding-lg">
								<view class="flex align-center">
									<view class=" text-xl">{{item.name}}</view>
									<view class="margin-left-sm"></view>
								</view>
								<view class="flex align-center">
									<view class="text-xl">{{item.osBit}}</view>
									<view class="margin-left-sm">位</view>
								</view>
								<view class="flex align-center">
									<view class="text-xl">{{item.loginMethod}}</view>
									<view class="margin-left-sm">登录</view>
								</view>
								<view class="flex align-center">
									<view class="text-price text-red text-xl">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('os',item.osId,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('os',item.osId,index)">
								<image src=" /static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>
					</scroll-view>
				</view>
				<!-- 数据库信息 -->
				<view v-if="type==5">
					<view class="padding-lg">
						<view><text class="title text-lg text-bold">编辑数据库</text></view>
						<view class="margin-top-lg"><button @click="insertProduct('db')" class="cu-btn"> 添加</button>
						</view>
					</view>
					<scroll-view scroll-y style="height: 1000rpx;">
						<view v-for="(item,index) in dbs.data" style="border-radius: 20rpx;"
							class=" bg-white margin-bottom-sm  flex align-center">
							<view class="padding-lg">

								<view class="flex align-center">
									<view class="text-xl">{{item.capacity}}</view>
									<view class="margin-left-sm">GB</view>
								</view>

								<view class="flex align-center">
									<view class="text-price text-red text-xl">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
								<view class="flex align-center">
									<view class="margin-right-sm"></view>
									<view class="text-xl">{{item.provider}}</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('db',item.id,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('db',item.id,index)">
								<image src="/static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>
					</scroll-view>
				</view>

				<!-- 网卡信息 -->
				<view v-if="type==6">
					<view class="padding-lg">
						<view><text class="title text-lg text-bold">编辑网卡</text></view>
						<view class="margin-top-lg"><button @click="insertProduct('nic')" class="cu-btn"> 添加</button>
						</view>
					</view>

					<scroll-view scroll-y style="height: 1000rpx;">
						<view v-for="(item,index) in nics.data" style="border-radius: 20rpx;"
							class=" bg-white  flex margin-bottom-sm align-center">
							<view class="padding-lg">
								<view class="flex align-center">
									<view class=" text-xl">{{item.bandwidth}}</view>
									<view class="margin-left-sm">M/S带宽</view>
								</view>
								<view class="flex align-center">
									<view class="text-price text-red text-xl">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('nic',item.nicId,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('nic',item.nicId,index)">
								<image src="/static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>
					</scroll-view>
				</view>
				<!-- 支持与服务信息 -->
				<view v-if="type==7">
					<view class="padding-lg">
						<view><text class="title text-lg text-bold">编辑服务与支持</text></view>
						<view class="margin-top-lg"><button @click="insertProduct('support')" class="cu-btn">
								添加</button></view>
					</view>
					<scroll-view scroll-y style="height: 1000rpx;">
						<view v-for="(item,index) in supports.data" style="border-radius: 20rpx;"
							class=" bg-white margin-bottom-sm  flex align-center">
							<view class="padding-sm">
								<view class="flex align-center">
									<view class="text-xl">{{item.response}}</view>
									<view class="margin-left-sm">小时报修</view>
								</view>

								<view class="flex align-center">
									<view class=" text-xl">{{item.present}}</view>
									<view class="margin-left-sm">小时到场</view>
								</view>
								<view class="flex align-center">
									<view class="text-xl text-price text-red">{{item.price}}</view>
									<view class="margin-left-sm">元/月</view>
								</view>
							</view>

							<button class="margin-left-sm cu-btn flex align-center"
								@click="updateProduct('support',item.id,index)">
								<image src="/static/management/modify.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
							<button class="margin-left-xl cu-btn " @click="delProduct('support',item.id,index)">
								<image src="/static/management/delete.png" style="height: 40rpx;width: 40rpx;">
								</image>
							</button>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentOperate: null,
				currentOperateObj: {
					clazz: null,
					item: null,
					index: null
				},
				indicater: {
					cpu: ["numberOfCores", "price", "clockSpeed"],
					gpu: ["calcCapability", "gpuMemory", "price"],
					mem: ["capacity", "price"],
					disk: ["capacity", "throughput", "price"],
					os: ["name", "osBit", "price"],
					db: ["capacity", "provider", "price"],
					nic: ["bandwidth", "price"],
					support: ["response", "present", "price"]
				},
				editDisable: false,
				showModal: false,
				modalTitle: "",
				type: 0,
				prods: ['cpu', 'gpu', 'mem', 'disk', 'os', 'db', 'nic', 'support'],
				state: [true, false, false, false, false, false, false],
				cpus: {
					data: []
				},
				gpus: {
					data: []
				},
				mems: {
					data: []
				},
				disks: {
					data: []
				},
				oss: {
					data: []
				},
				nics: {
					data: []
				},
				dbs: {
					data: []
				},
				supports: {
					data: []
				},
			}
		},
		methods: {
			showToast(res, oper) {
				if (res.data.code == undefined) {
					uni.showToast({
						title: oper + "失败",
						duration: 2000,
						icon: "none"
					})
					return false
				}
				if (res.data.code == 200) {
					uni.showToast({
						title: oper + "成功",
						duration: 2000,
						icon: "none"
					})
					return true
				} else {
					uni.showToast({
						title: oper + "失败 " + res.data.msg,
						duration: 2000,
						icon: "none"
					})
					return false
				}
			},
			btnClick(index) {
				for (var i in this.state) {
					if (this.state[i] == true && i != index) {
						this.state[i] = false
					}
				}
				this.$set(this.state, index, true)
				this.type = index
			},
			delProduct(clazz, id, index) {
				this.editDisable = true
				this.currentOperate = 'del'
				this.modalTitle = "确认删除"
				this.currentOperateObj.item = this[clazz + "s"].data[index]
				this.currentOperateObj.clazz = clazz
				this.currentOperateObj.index = index
				this.currentOperateObj.id = id
				this.showModal = true
			},
			updateProduct(clazz, id, index) {
				this.editDisable = false
				this.currentOperate = 'update'
				this.modalTitle = "更新产品信息"
				this.currentOperateObj.item = JSON.parse(JSON.stringify(this[clazz + "s"].data[index]))
				this.currentOperateObj.clazz = clazz
				this.currentOperateObj.index = index
				this.currentOperateObj.id = id
				this.showModal = true
			},
			insertProduct(clazz) {
				this.currentOperateObj.item = {}
				this.editDisable = false
				this.currentOperate = 'insert'
				this.modalTitle = "添加产品"
				this.currentOperateObj.clazz = clazz
				this.showModal = true
			},
			modalConfirm() {
				var index = this.currentOperateObj.index
				var clazz = this.currentOperateObj.clazz
				var id = this.currentOperateObj.id
				var item = this.currentOperateObj.item
				if (this.currentOperate == 'del')
					uni.request({
						url: this.$url + "deleteProduct",
						header: {
							"Authorization": this.$sa_token.value
						},
						data: {
							clazz: clazz,
							id: id
						},
						success: (res) => {
							if (this.showToast(res, "删除")) {
								var del_item = this[clazz + "s"].data.splice(index, 1)
								var new_prod = this[clazz + "s"].data
								console.log(new_prod);
								this.$set(this[clazz + "s"], "data", new_prod)
							}
						},
						fail: (res) => {
							this.showToast(res, "删除")
						}
					})
				else if (this.currentOperate == 'update') {
					var indicaters = this.indicater
					var checked = true
					for (var i in indicaters[clazz]) {
						if (this.currentOperateObj.item[indicaters[clazz][i]] == undefined || this.currentOperateObj.item[
								indicaters[clazz][i]] == "") {
							checked = false
						}
					}
					if (!checked) {
						uni.showToast({
							icon: 'none',
							title: "请填写完整信息"
						})
						return
					}
					uni.request({
						url: this.$url + "updateProduct",
						header: {
							"Authorization": this.$sa_token.value
						},
						data: {
							clazz: clazz,
							id: id,
							prod: JSON.stringify(item)
						},
						success: (res) => {
							if (this.showToast(res, "修改")) {
								this.$set(this[clazz + "s"]["data"], index, item)
							}
						},
						fail: (res) => {
							this.showToast(res, "修改")
						}
					})
				} else if (this.currentOperate == 'insert') {
					var indicaters = this.indicater
					var checked = true
					for (var i in indicaters[clazz]) {
						if (this.currentOperateObj.item[indicaters[clazz][i]] == undefined || this.currentOperateObj.item[
								indicaters[clazz][i]] == "") {
							checked = false
						}
					}
					if (!checked) {
						uni.showToast({
							icon: 'none',
							title: "请填写完整信息"
						})
						return
					}
					uni.request({
						url: this.$url + "insertProduct",
						header: {
							"Authorization": this.$sa_token.value
						},
						data: {
							clazz: clazz,
							prod: JSON.stringify(item)
						},
						success: (res) => {
							if (this.showToast(res, "添加")) {
								this[clazz + "s"]["data"].unshift(res.data.data)
								this.$set(this[clazz + "s"]["data"], index, res.data.data)
							}
						},
						fail: (res) => {
							this.showToast(res, "添加")
						}
					})
				}
			},

			onLoad(option) {
				this.type = option.select
				console.log("invoke onload");
				uni.request({
					url: this.$url + "getAllProduct",
					header: {
						"Authorization": this.$sa_token.value
					},
					success: (resp) => {
						this.$set(this.cpus, "data", resp.data.cpus)
						this.$set(this.gpus, "data", resp.data.gpus)
						this.$set(this.oss, "data", resp.data.oss)
						this.$set(this.mems, "data", resp.data.mems)
						this.$set(this.dbs, "data", resp.data.dbs)
						this.$set(this.disks, "data", resp.data.disks)
						this.$set(this.nics, "data", resp.data.nics)
						this.$set(this.supports, "data", resp.data.supports)
					}
				})
			}
		},
	}
</script>

<style>

</style>